<template>
	<view class="container">
		<view class="detail">
			<view class="top">
				<view class="income" v-if="detail.bill_type == 'income'">+{{ detail.bill_money }}</view>
				<view class="payed" v-else-if="detail.bill_type == 'payed'">{{ detail.bill_money }}</view>
			</view>
			<view class="info">
				<view class="label">
					<view class="name">费用名称</view>
					<view class="value">{{ detail.bill_title }}</view>
				</view>
				<view class="label" v-if="type == 1">
					<view class="name">租客姓名</view>
					<view class="value">{{ detail.customer_name }}</view>
				</view>
				<view class="label" v-else-if="type == 2">
					<view class="name">业主姓名</view>
					<view class="value">{{ detail.user_name }}</view>
				</view>
				<view class="label">
					<view class="name">房源地址</view>
					<view class="value">{{ detail.room_address }}</view>
				</view>
				<view class="label">
					<view class="name">交易时间</view>
					<view class="value">{{ detail.bill_date }}</view>
				</view>
				<view class="label">
					<view class="name">支付</view>
					<view class="value" v-if="detail.pay_type == 'online'">线上</view>
					<view class="value" v-else-if="detail.pay_type == 'offline'">线下</view>
				</view>
				<view class="label">
					<view class="name">分组</view>
					<view class="value">{{ detail.group_name }}</view>
				</view>
			</view>
			<view class="info more">
				<view class="label">
					<view class="name">账单备注</view>
					<view class="btn" @click="editDesc(detail)">编辑</view>
				</view>
				<view class="desc" v-if="detail.bill_desc != ''">{{ detail.bill_desc }}</view>
			</view>
			<view class="info more">
				<view class="label">
					<view class="name">图片</view>
					<view class="btn" @click="editImage(detail)">编辑</view>
				</view>
				<view class="media" v-if="images.length > 0">
					<uni-row :gutter="20">
						<uni-col :span="8" v-for="item in images" :key="item">
							<image :src="item" mode="aspectFill"></image>
						</uni-col>
					</uni-row>
				</view>
			</view>
			<view class="botBtn">
				<button type="warn" @click="deleteBill">删除账单</button>
			</view>
		</view>
	</view>
</template>

<script>
import api from '@/api/api';
export default {
	data() {
		return {
			id: null,
			type: 1,
			detail: {},
			images: []
		};
	},
	onLoad(e) {
		this.id = e.id;
		this.type = e.type;
	},
	onShow() {
		this.getDetail();
	},
	methods: {
		editDesc(item) {
			if (this.type == 1) {
				uni.navigateTo({
					url: '/pages/details/desc?type=billRent&id=' + item.id + '&value=' + item.bill_desc
				});
			} else if (this.type == 2) {
				uni.navigateTo({
					url: '/pages/details/desc?type=billOwner&id=' + item.id + '&value=' + item.bill_desc
				});
			}
		},
		editImage(item) {
			uni.setStorageSync('image', item.bill_images);
			if (this.type == 1) {
				uni.navigateTo({
					url: '/pages/details/info/image?type=billRent&id=' + item.id
				});
			} else if (this.type == 2) {
				uni.navigateTo({
					url: '/pages/details/info/image?type=billOwner&id=' + item.id
				});
			}
		},
		deleteBill() {
			const _this = this;
			uni.showModal({
				title: '提示',
				content: '确认删除此账单？',
				success: function (res) {
					if (res.confirm) {
						if (_this.type == 1) {
							api.deleteBill({ bill_ids: _this.id }).then((res) => {
								_this.deleteThen(res);
							});
						} else if (_this.type == 2) {
							api.deleteBillOwner({ bill_ids: _this.id }).then((res) => {
								_this.deleteThen(res);
							});
						}
					}
				}
			});
		},
		deleteThen(res) {
			if (res.data.is_success) {
				uni.showToast({
					title: '删除成功！',
					icon: 'success'
				});
				setTimeout(() => {
					uni.hideToast();
					uni.navigateBack();
				}, 1000);
			}
		},
		getDetail() {
			if (this.type == 1) {
				api.billDetail({ bill_id: this.id }).then((res) => {
					this.detail = res.data.info;
					this.images = res.data.info.bill_images == '' ? [] : res.data.info.bill_images.split(',');
				});
			} else if (this.type == 2) {
				api.billDetailOwner({ bill_id: this.id }).then((res) => {
					this.detail = res.data.info;
					this.images = res.data.info.bill_images == '' ? [] : res.data.info.bill_images.split(',');
				});
			}
		}
	}
};
</script>

<style lang="scss">
.detail {
	.top {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 160rpx;
		background: #fff;
		font-size: 36rpx;
		font-weight: bold;
		.income {
			color: #1ecb6b;
		}
		.payed {
			color: #ee5959;
		}
	}
	.info {
		margin-bottom: 20rpx;
		background: #fff;
		padding: 0 20rpx;
		.label {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 90rpx;
			border-bottom: 1rpx solid $uni-border-2;
			&:last-child {
				border-bottom: none;
			}
			.name {
				font-size: 28rpx;
				color: #000;
			}
			.value {
				font-size: 28rpx;
				color: $uni-base-color;
			}
			.btn {
				font-size: 26rpx;
				color: $uni-primary;
			}
		}
		&.more {
			padding-bottom: 20rpx;
			.label {
				border-bottom: none;
			}
			.desc {
				margin-top: 20rpx;
				background: $uni-bg-color;
				padding: 10rpx;
				font-size: 28rpx;
				line-height: 42rpx;
				color: $uni-base-color;
			}
			.media {
				margin-top: 20rpx;
				.uni-row {
					width: 100%;
					.uni-col {
						height: 220rpx;
						overflow: hidden;
						margin-bottom: 20rpx;
						image {
							width: 100%;
							height: 220rpx;
						}
					}
				}
			}
		}
	}
	.botBtn {
		padding: 60rpx 20rpx 100rpx;
	}
}
</style>
